This is basic demo of using Web Workers (which are child threads) to generate a random value which is posted back to the main thread (this page). The value is then used to update the Gauge. To make a useful example you could use the child thread in conjunction with Web Sockets to retieve (for example) load values from your server(s). Also, to retrieve data from your server you may find it easier and less involved to use AJAX.
See also:
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.gauge.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
/**
* Create the worker child thread. The code that is used as the child thread is held
* in the /libraries/basic-web-workers.js file.
*/
var worker = new Worker('/libraries/basic-web-workers.js');
/**
* The message event is used to listen for messages from the worker thread. When it sends a message
* to the main thread (ie the main page) the message event is fired and this function runs. It simply updates
* the Gauge using the Grow effect.
*/
worker.addEventListener('message', function (e)
{
// The data/message that is returned from the worker is a string - so
// it must be converted to a number
var value = (Number(e.data) * 0.2) + 0.4;
gauge.value = value;
gauge.grow();
}, false);
/**
* Create the Gauge chart. Initially it is set to have 0 value.
*/
var gauge = new RGraph.Gauge({
id: 'cvs',
min: 0,
max: 1,
value:0,
options: {
textAccessible: true,
scaleDecimals: 1
}
}).draw();
};
</script>